<template>
  <div class="lesson">

    <!-- 搜索 -->
    <div class="lesson-search-container">
      <div class="lesson-search ml-center">
        <img src="https://coding.imooc.com/static/module/index/img/header-icon1.png" alt="" height="96">
        <img class="sub-img" src="https://coding.imooc.com/static/module/index/img/header-icon2.png?222" height="96" alt="">
        <div class="search-box">
          <div class="input-box">
            <input type="text" v-model="query.title" @keyup.enter="getLessonListData(query, listQuery)" placeholder="搜索感兴趣的实战课程内容" class="input">
            <div @click="getLessonListData(query, listQuery)" class="icon-box">
              <i class="iconfont">&#xe63c;</i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导航 -->
    <div class="lesson-nav-container">
      <dl class="category-list ml-center">
        <dd
                v-for="(nav,index) in navList[0].data"
                :key="index"
                class="category-item"
                :class="{active: nav == currentTag}"
                @click="handleTagNavClick(nav,index)"
        >
          {{ nav }}
        </dd>
      </dl>
    </div>

    <!-- 列表 -->
    <lesson-list :list.sync="lessonList" />

    <!-- 分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getLessonListData(query, listQuery)" />
  </div>
</template>
<script>
import LessonList from './lesson-list.vue'
import Pagination from 'components/pagination/pagination.vue'
import { getLessonList } from 'api/lesson.js'
import { ERR_OK } from 'api/config.js'
export default {
  data () {
    return {
      lessonList: [], // 课程列表
      navList: [], // 导航列表
      listQuery: {
        page: 1,
        limit: 18
      },
      total: 0,
      query: {
        tag: null,
        rank: '实战',
      },
      currentTagTitle: '全部',
      currentTag: '全部',
    }
  },
  created () {
    this.getLessonNavData()
    this.getLessonListData(this.query, this.listQuery)
  },
  methods: {
    // 获取导航数据
    getLessonNavData () {
      this.navList = [
        {
          "type": "分类",
          "code": "category",
          "data": ["全部", "React", "Angular", "Node",
            "小程序", "前端工具", "CSS", "Html5", "CSS3","Java", "SpringBoot","Spring Cloud",
            "Python", "爬虫", "Django", "Tornado", "Go", "PHP", "C", "C++", "C#", "Ruby","Android", "iOS", "React native",
            "MySQL", "Redis", "MongoDB", "Oracle", "SQL Server", "NoSql","大数据","Hadoop", "Spark", "Hbase", "Storm",
            "运维", "自动化运维", "运维工具", "中间件", "Linux",]
        }
      ]
    },
    // 获取课程列表数据
    getLessonListData (query, listQuery) {
      getLessonList(query, listQuery).then(res => {
        if (res.code === ERR_OK) {
          this.lessonList = res.data.rows
          this.total = res.data.total
        }
      })
    },
    handleTagNavClick (nav, index) {
      this.currentTag = nav
      if (nav == '全部') {
        this.query.tag = null
      } else {
        this.query.tag = nav
      }
      this.getLessonListData(this.query, this.listQuery)
    },
  },
  components: {
    LessonList,
    Pagination
  }
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .lesson-search-container
    padding: 17px 19px;
    height: 132px;
    box-sizing: border-box;
    background: url('https://coding.imooc.com/static/module/index/img/sz-header-bk.png') no-repeat center center;
    background-size: cover;
    .lesson-search
      & > img
        display: inline-block;
        vertical-align: middle;
        &.sub-img
          margin-left: 20px;
      .search-box
        float: right;
        margin-top: 24px;
        .input-box
          position: relative;
          height: 48px;
          .input
            display: inline-block;
            vertical-align: middle;
            padding: 0 16px;
            width: 512px;
            height: 100%;
            box-sizing: border-box;
            border-radius: 8px 0 0 8px;
            outline: none;
          .icon-box
            display: inline-block;
            vertical-align: middle;
            width: 48px;
            height: 48px;
            line-height: 48px;
            background-color: $theme-orange-dark-color;
            border-radius: 0 8px 8px 0;
            color: #fff;
            text-align: center;
            cursor: pointer;
            .iconfont
              font-size: 20px;
              font-weight: 700;
        .hot-box
          margin-top: 8px;
          font-size: 12px;
          color:rgba(255,255,255,0.8);
          line-height: 18px;
          & > dt
            display: inline-block;
            vertical-align: center;
            margin-right: 10px;
          .hot-item
            display: inline-block;
            vertical-align: center;
            margin-right: 20px;
            cursor: pointer;

  .lesson-nav-container
    .lesson-nav
      z-index: 1;
      position: relative;
      padding: 16px 0;
      height: 72px;
      box-sizing: border-box;
      box-shadow: 0 8px 16px 0 rgba(7,17,27,0.1)
      background-color: #fff;
      .nav-item
        position: relative;
        display: inline-block;
        margin-right: 46px;
        height: 40px;
        line-height: 40px;
        color: $font-first-color;
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        &:hover
          color: $theme-orange-dark-color;
        &.active
          color: $theme-orange-dark-color;
          &::after
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -8px;
            width: 16px;
            height: 3px;
            background-color: $theme-orange-dark-color;
            border-radius: 2px;
    .category-list
      margin-top: 24px;
      .category-item
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 12px;
        padding: 0 12px;
        line-height: 32px;
        border-radius: 6px;
        font-size: 14px;
        color: $font-second-color;
        cursor: pointer;
        &:hover
          color: $theme-orange-dark-color;
          background-color: rgba(204,136,0,.1);
        &.active
          color: $theme-orange-dark-color;
          background-color: rgba(204,136,0,.1);
</style>

